<template>
  <div class="task">
    <div class="title">任务导航</div>
    <div class="item-list">
      <el-row>
        <el-col v-for="(item, index) in list" :key="index" :span="5">
          <div class="item" @click="$router.push({ name: item.name })">
            <div class="icon" :style="item.bgc">
              <i class="iconfont" :class="item.icon" />
            </div>
            <div class="value">{{ item.title }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: 'icon_db_shouhuo2x',
          title: '收货任务',
          name: 'task-receive',
          bgc: 'background: rgb(0, 118, 255);'
        },
        {
          icon: 'icon_db_shangjia2x',
          title: '上架任务',
          name: 'task-add',
          bgc: 'background: rgb(82, 212, 243);'
        },
        {
          icon: 'icon_db_renwu2x',
          title: '盘点任务',
          name: 'list-task',
          bgc: 'background: rgb(255, 113, 0);'
        },
        {
          icon: 'icon_db_lianhuo2x',
          title: '拣货任务',
          name: 'task-picking',
          bgc: 'background: rgb(255, 96, 158);'
        },
        {
          icon: 'icon_db_jiaojie2x',
          title: '交接任务',
          name: 'manage-task-transfer',
          bgc: 'background: rgb(255, 178, 0);'
        }

      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.task {
  width: 100%;
  height: 188px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;

  .title {
    font-size: 16px;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }

  .item-list {
    margin-top: 19px;

    .el-col {
      width: 20% !important;
      padding-left: 15px;
      padding-right: 15px;

      .item {
        display: flex;
        justify-content: space-evenly;
        position: relative;
        width: 100%;
        height: 93px;
        background: #fbf7f7;
        border-radius: 8px;
        align-items: center;
        cursor: pointer;

        &:hover {
          background-color: #fff;
          box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
        }

        .icon {
          width: 50px;
          height: 50px;
          background: #0076ff;
          border-radius: 25px;
          display: flex;
          align-items: center;
          justify-content: space-around;

          i {
            font-size: 28px;
            color: #f8f5f5;
          }
        }
      }
    }
  }
}
</style>
